<!DOCTYPE html>
<html>
<head>
	<style type="text/css">
	.top_container {
		/* <<< */
		-webkit-border-image: none;
		border-bottom-color: rgb(0, 0, 0);
		border-bottom-style: none;
		border-bottom-width: 0px;
		border-left-color: rgb(0, 0, 0);
		border-left-style: none;
		border-left-width: 0px;
		border-right-color: rgb(0, 0, 0);
		border-right-style: none;
		border-right-width: 0px;
		border-top-color: rgb(0, 0, 0);
		border-top-style: none;
		border-top-width: 0px;
		color: rgb(0, 0, 0);
		display: block;
		font-family: 'Sugoe UI', 'Lucida Grande', Arial, sans-serif;
		font-size: 12px;
		font-style: normal;
		font-variant: normal;
		font-weight: normal;
		height: 825px;
		line-height: normal;
		margin-bottom: 0px;
		margin-left: 0px;
		margin-right: 0px;
		margin-top: 0px;
		outline-color: rgb(0, 0, 0);
		outline-style: none;
		outline-width: 0px;
		overflow-x: hidden;
		overflow-y: hidden;
		position: relative;
		vertical-align: baseline;
		width: 1010px;
	}
/* >>> */

	.view_container {
		/* <<< */
		-webkit-border-image: none;
		border-bottom-color: rgb(0, 0, 0);
		border-bottom-style: none;
		border-bottom-width: 0px;
		border-left-color: rgb(0, 0, 0);
		border-left-style: none;
		border-left-width: 0px;
		border-right-color: rgb(0, 0, 0);
		border-right-style: none;
		border-right-width: 0px;
		border-top-color: rgb(0, 0, 0);
		border-top-style: none;
		border-top-width: 0px;
		color: rgb(0, 0, 0);
		display: block;
		font-family: 'Sugoe UI', 'Lucida Grande', Arial, sans-serif;
		font-size: 12px;
		font-style: normal;
		font-variant: normal;
		font-weight: normal;
		line-height: normal;
		margin-bottom: 0px;
		margin-left: 0px;
		margin-right: 0px;
		margin-top: 0px;
		outline-color: rgb(0, 0, 0);
		outline-style: none;
		outline-width: 0px;
		overflow-x: hidden;
		overflow-y: hidden;
		vertical-align: baseline;
		z-index: 2;
	}
/* >>> */

	.document_container {
		/* <<< */
		-webkit-background-clip: border-box;
		-webkit-background-origin: padding-box;
		-webkit-background-size: auto;
		-webkit-border-image: none;
		-webkit-transition-duration: 2s;
		-webkit-transition-property: opacity;
		background-attachment: scroll;
		background-clip: border-box;
		background-color: rgb(128,128,128);
		background-image: none;
		background-origin: padding-box;
		background-size: auto;
		border-bottom-color: rgb(48, 48, 48);
		border-bottom-style: none;
		border-bottom-width: 0px;
		border-left-color: rgb(48, 48, 48);
		border-left-style: none;
		border-left-width: 0px;
		border-right-color: rgb(48, 48, 48);
		border-right-style: none;
		border-right-width: 0px;
		border-top-color: rgb(48, 48, 48);
		border-top-style: none;
		border-top-width: 0px;
		color: rgb(48, 48, 48);
		display: block;
		font-family: 'Sugoe UI', 'Lucida Grande', Arial, sans-serif;
		font-size: 12px;
		font-style: normal;
		font-variant: normal;
		font-weight: normal;
		line-height: normal;
		margin-bottom: 0px;
		margin-left: 0px;
		margin-right: 0px;
		margin-top: 0px;
		outline-color: rgb(48, 48, 48);
		outline-style: none;
		outline-width: 0px;
		overflow-x: auto;
		overflow-y: auto;
		padding-bottom: 0px;
		padding-left: 0px;
		padding-right: 0px;
		padding-top: 0px;
		vertical-align: baseline;
		z-index: 2;
	}
/* >>> */

	.page_container {
		/* <<< */
		-webkit-border-image: none;
		border-bottom-color: rgb(0, 0, 0);
		border-bottom-style: none;
		border-bottom-width: 0px;
		border-left-color: rgb(0, 0, 0);
		border-left-style: none;
		border-left-width: 0px;
		border-right-color: rgb(0, 0, 0);
		border-right-style: none;
		border-right-width: 0px;
		border-top-color: rgb(0, 0, 0);
		border-top-style: none;
		border-top-width: 0px;
		color: rgb(0, 0, 0);
		display: block;
		font-family: 'Sugoe UI', 'Lucida Grande', Arial, sans-serif;
		font-size: 12px;
		font-style: normal;
		font-variant: normal;
		font-weight: normal;
/*		height: 505px; */
		line-height: normal;
		margin-bottom: 0px;
		margin-left: 0px;
		margin-right: 0px;
		margin-top: 0px;
		outline-color: rgb(0, 0, 0);
		outline-style: none;
		outline-width: 0px;
		padding-bottom: 0px;
		padding-left: 0px;
		padding-right: 0px;
		padding-top: 0px;
		vertical-align: baseline;
/*		width: 710px; */
	}
/* >>> */
	
	.page_view {
		/* <<< */
		-webkit-border-image: none;
		border-bottom-color: rgb(0, 0, 0);
		border-bottom-style: none;
		border-bottom-width: 0px;
		border-left-color: rgb(0, 0, 0);
		border-left-style: none;
		border-left-width: 0px;
		border-right-color: rgb(0, 0, 0);
		border-right-style: none;
		border-right-width: 0px;
		border-top-color: rgb(0, 0, 0);
		border-top-style: none;
		border-top-width: 0px;
		color: rgb(0, 0, 0);
		display: block;
		font-family: 'Sugoe UI', 'Lucida Grande', Arial, sans-serif;
		font-size: 12px;
		font-style: normal;
		font-variant: normal;
		font-weight: normal;
		line-height: normal;
		margin-bottom: 0px;
		margin-top: 10px;
		outline-color: rgb(0, 0, 0);
		outline-style: none;
		outline-width: 0px;
		padding-bottom: 0px;
		padding-left: 0px;
		padding-right: 0px;
		padding-top: 0px;
		vertical-align: baseline;
	}
/* >>> */

	.page_content {
		/* <<< */
		color: rgb(0, 0, 0);
		display: inline;
		font-family: 'Sugoe UI', 'Lucida Grande', Arial, sans-serif;
		font-size: 12px;
		font-style: normal;
		font-variant: normal;
		font-weight: normal;
/*		height: 505px; */
		line-height: normal;
		margin-bottom: 0px;
		margin-left: 0px;
		margin-right: 0px;
		margin-top: 0px;
/*
		overflow-x: hidden;
		overflow-y: hidden;
*/
		padding-bottom: 0px;
		padding-left: 0px;
		padding-right: 0px;
		padding-top: 0px;
/*		width: 389.96875px; */
	}
/* >>> */

	</style>
	<script src="scripts/jquery-2.0.3.js" type="text/javascript"></script>
	<script type="text/javascript">
		$(document).ready( function() {
			var g_zoomTimer;
			$('#zoom-in').bind('mousedown', function(e) {
				console.log('mouse down');
				g_zoomTimer = setInterval( function() {
					console.log('zooming in');
					var w = parseFloat($('#cont_id_01').css('width'));
					var h = parseFloat($('#cont_id_01').css('height'));
//					var m = parseFloat($('#cont_id_01').css('margin-left'));
					var c = parseFloat($('div.page_container').css('width'));
					var m = ( c - w ) / 2;
					
					var o = w;
					var d;
					w *= 1.03;
					h *= 1.03;
					d = (w - o ) / 2;
					m = m - d;
					m = ( m > 0? m: 0 );
					var mx = w / 1112;
//					$('#page_id_01').removeAttr('width').attr('width', w + 'px');
//					$('#page_id_01').removeAttr('height').attr('height', h + 'px');
//					$('#cont_id_01').css('width', w + 'px');
//					$('#cont_id_01').css('height', h + 'px');
//					$('#cont_id_01').css('margin-left', m + 'px');
//					$('#cont_id_01').css('margin-right', m + 'px');
//					$('#page_id_01 > g[transform]').attr('transform', 'matrix(' + mx + ',0.0,0.0,' + mx + ',0.0,0.0)');


					$('div.document_container > div > div > svg').removeAttr('width').removeAttr('height').attr('width', w + 'px').attr('height', h + 'px' );
					$('div.document_container > div > div').css('width', w + 'px').css('height', h + 'px').css('margin-left', m + 'px').css('margin-right', m + 'px' );
					$('div.document_container > div > div > svg > g[transform]').attr('transform', 'matrix(' + mx + ',0.0,0.0,' + mx + ',0.0,0.0)');

					/* top/bottom scrolling is always used */
					var current = $('div.document_container').scrollTop();
					var ratio = w / o; 
					current *= ratio; // trick for keeping the mid screen mid point in the middle.
//					current *= (ratio * 1.005); // trick for keeping the mid screen mid point in the middle.
					console.log("Current=" + current );
//					current += (546/2);
					console.log("Current=" + current );
					$('div.document_container').scrollTop(current);

					/* use scrolling when the content overflows right/left margin */
					if( m == 0 ) {
						console.log('trigger scroll!');
						m = ( w - c ) / 2;
						$('div.document_container').scrollLeft(m);
					}
				}, 30 );
			});				
			$('#zoom-in').bind('mouseup', function(e) {
				console.log('mouse up');
				window.clearInterval(g_zoomTimer);
			});				
			$('#zoom-out').bind('mousedown', function(e) {
				console.log('mouse down');
				g_zoomTimer = setInterval( function() {
					console.log('zooming in');
					var w = parseFloat($('#cont_id_01').css('width'));
					var h = parseFloat($('#cont_id_01').css('height'));
//					var m = parseFloat($('#cont_id_01').css('margin-left'));
					var c = parseFloat($('div.page_container').css('width'));
					var m = ( c - w ) / 2;
					var o = w;
					var d;
					w *= 0.97;
					h *= 0.97;
					d = (w - o ) / 2;
					m = m - d;
					m = ( m > 0 ? m: 0 );
					var mx = w / 1112;

					$('div.document_container > div > div > svg').removeAttr('width').removeAttr('height').attr('width', w + 'px').attr('height', h + 'px' );
					$('div.document_container > div > div').css('width', w + 'px').css('height', h + 'px').css('margin-left', m + 'px').css('margin-right', m + 'px' );
					$('div.document_container > div > div > svg > g[transform]').attr('transform', 'matrix(' + mx + ',0.0,0.0,' + mx + ',0.0,0.0)');

					/* top/bottom scrolling is always used */
					var current = $('div.document_container').scrollTop();
					var ratio = w / o; 
					current *= ratio;
//					current *= (ratio * 0.995);
					$('div.document_container').scrollTop(current);

					if( m == 0 ) {
						console.log('trigger scroll!');
						m = ( w - c ) / 2;
						$('div.document_container').scrollLeft(m);
					}
				}, 30 );
			});				
			$('#zoom-out').bind('mouseup', function(e) {
				console.log('mouse up');
				window.clearInterval(g_zoomTimer);
			});				
		});
	</script>
</head>
<body>
<div class="top_container" style="padding: 0px;">
	<div class="view_container" style="padding: 0px; left: 0px; top: 54px; position: relative; width: 974px; height: 771px;">
		<div class="document_container" style="opacity: 1; left: 0px; top: 0px; position: absolute; width: 974px; height: 760px;">
			<div class="page_container">
				<div id="cont_id_01" class="page_view" style="width: 891.43px; height: 1156.24px; margin-left: 33.785000000000025px; margin-right: 33.785000000000025px;">
					<svg class="page_content" overflow="hidden" width="891.43" height="1156.24">
						<defs></defs>
						<g transform="matrix(0.8016456834532374,0.0,0.0,0.8016456834532374,0.0,0.0)">
							<image fill-opacity="0" stroke="none" stroke-opacity="0" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" x="0" y="0" width="1112" height="1440" preserveAspectRatio="none" xlink:href="img/data.png"></image>
							<g transform="matrix(0.13082353,0.00000000,0.00000000,-0.13090909,0.00000000,1440.00000000)">
								<g></g>
							</g>
							<g transform="matrix(0.13082353,0.00000000,0.00000000,-0.13090909,0.00000000,1440.00000000)">
								<g></g>
							</g>
							<g transform="matrix(0.13082353,0.00000000,0.00000000,-0.13090909,0.00000000,1440.00000000)">
							</g>
						</g>
						<g></g>
					</svg>
				</div>
			</div>
			<div class="page_container">
				<div id="cont_id_02" class="page_view" style="width: 891.43px; height: 1156.24px; margin-left: 33.785000000000025px; margin-right: 33.785000000000025px;">
					<svg class="page_content" overflow="hidden" width="891.43" height="1156.24">
						<defs></defs>
						<g transform="matrix(0.8016456834532374,0.0,0.0,0.8016456834532374,0.0,0.0)">
							<image fill-opacity="0" stroke="none" stroke-opacity="0" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" x="0" y="0" width="1112" height="1440" preserveAspectRatio="none" xlink:href="img/data.png"></image>
							<g transform="matrix(0.13082353,0.00000000,0.00000000,-0.13090909,0.00000000,1440.00000000)">
								<g></g>
							</g>
							<g transform="matrix(0.13082353,0.00000000,0.00000000,-0.13090909,0.00000000,1440.00000000)">
								<g></g>
							</g>
							<g transform="matrix(0.13082353,0.00000000,0.00000000,-0.13090909,0.00000000,1440.00000000)">
							</g>
						</g>
						<g></g>
					</svg>
				</div>
			</div>
			<!--
			<div class="page_container" style="-webkit-transform: scale(1.0) rotate(270deg);">
			-->
			<div class="page_container">
				<div id="cont_id_03" class="page_view" style="width: 891.43px; height: 1156.24px; margin-left: 33.785000000000025px; margin-right: 33.785000000000025px;">
					<svg class="page_content" overflow="hidden" width="891.43" height="1156.24">
						<defs></defs>
						<g transform="matrix(0.8016456834532374,0.0,0.0,0.8016456834532374,0.0,0.0)">
							<image fill-opacity="0" stroke="none" stroke-opacity="0" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" x="0" y="0" width="1112" height="1440" preserveAspectRatio="none" xlink:href="img/data.png"></image>
							<g transform="matrix(0.13082353,0.00000000,0.00000000,-0.13090909,0.00000000,1440.00000000)">
								<g></g>
							</g>
							<g transform="matrix(0.13082353,0.00000000,0.00000000,-0.13090909,0.00000000,1440.00000000)">
								<g></g>
							</g>
							<g transform="matrix(0.13082353,0.00000000,0.00000000,-0.13090909,0.00000000,1440.00000000)">
							</g>
						</g>
						<g></g>
					</svg>
				</div>
			</div>
			<div class="page_container">
				<div id="cont_id_04" class="page_view" style="width: 891.43px; height: 1156.24px; margin-left: 33.785000000000025px; margin-right: 33.785000000000025px;">
					<svg class="page_content" overflow="hidden" width="891.43" height="1156.24">
						<defs></defs>
						<g transform="matrix(0.8016456834532374,0.0,0.0,0.8016456834532374,0.0,0.0)">
							<image fill-opacity="0" stroke="none" stroke-opacity="0" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" x="0" y="0" width="1112" height="1440" preserveAspectRatio="none" xlink:href="img/data.png"></image>
							<g transform="matrix(0.13082353,0.00000000,0.00000000,-0.13090909,0.00000000,1440.00000000)">
								<g></g>
							</g>
							<g transform="matrix(0.13082353,0.00000000,0.00000000,-0.13090909,0.00000000,1440.00000000)">
								<g></g>
							</g>
							<g transform="matrix(0.13082353,0.00000000,0.00000000,-0.13090909,0.00000000,1440.00000000)">
							</g>
						</g>
						<g></g>
					</svg>
				</div>
			</div>
		</div>
	</div>
</div>
<div>
	<button id="zoom-in">Zoom in</button>
	<button id="zoom-out">Zoom out</button>
</div>
</body>
</html>
